1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
import {
Button,
Column,
Icon,
Row,
Tab,
TabList,
TabPanel,
Tabs,
TextField,
} from '@umami/react-zen';
import { X } from 'lucide-react';
import { Avatar } from '@/components/common/Avatar';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { useMessages, useWebsiteSessionQuery } from '@/components/hooks';
import { SessionActivity } from './SessionActivity';
import { SessionData } from './SessionData';
import { SessionInfo } from './SessionInfo';
import { SessionStats } from './SessionStats';
export function SessionProfile({
websiteId,
sessionId,
onClose,
}: {
websiteId: string;
sessionId: string;
onClose?: () => void;
}) {
const { data, isLoading, error } = useWebsiteSessionQuery(websiteId, sessionId);
const { formatMessage, labels } = useMessages();
return (
<LoadingPanel
data={data}
isLoading={isLoading}
error={error}
loadingIcon="spinner"
loadingPlacement="absolute"
>
{data && (
<Column gap>
{onClose && (
<Row justifyContent="flex-end">
<Button onPress={onClose} variant="quiet">
<Icon>
<X />
</Icon>
</Button>
</Row>
)}
<Column gap="6">
<Row justifyContent="center" alignItems="center" gap="6">
<Avatar seed={data?.id} size={128} />
<Column width="360px">
<TextField label="ID" value={data?.id} allowCopy />
</Column>
</Row>
<SessionStats data={data} />
<SessionInfo data={data} />
<Tabs>
<TabList>
<Tab id="activity">{formatMessage(labels.activity)}</Tab>
<Tab id="properties">{formatMessage(labels.properties)}</Tab>
</TabList>
<TabPanel id="activity">
<SessionActivity
websiteId={websiteId}
sessionId={sessionId}
startDate={data?.firstAt}
endDate={data?.lastAt}
/>
</TabPanel>
<TabPanel id="properties">
<SessionData sessionId={sessionId} websiteId={websiteId} />
</TabPanel>
</Tabs>
</Column>
</Column>
)}
</LoadingPanel>
);
}
|